<template>
	<div class="editAddress">
	    <x-header title="编辑收货地址" :left-options="{backText:''}" class='whiteHeader'>
        </x-header>
	    <div class="addressMess">
	    	<div class="ItemList">
	    		<label class="userName"><span>收</span><span class="spanCenter">货</span><span>人</span>：</label>
	    		<input type="text" v-model.trim="userName"/>
	    	</div>
	    	<div class="ItemList">
	    		<label>联系电话：</label>
	    		<input type="text" v-model.trim="userTel"/>
	    	</div>
	    	<div class="ItemList selectQ">
	    		<label>所在地区：</label>
	    		<group>
		    		<x-address :title="title" @on-hide="logHide" v-model.trim="value" :list="addressData" placeholder="请选择地址">
	                </x-address>
	            </group>
	    	</div>
	    	<div class="ItemList detailAddress">
	    		<label>详细地址：</label>
	    		<input type="text" v-model.trim="detailAddress"/>
	    	</div>
	    	<div class="ItemList defaults">
	    		<label class="selectDefaults">设为默认：</label>
	    		<mt-switch v-model.trim="defaults"></mt-switch>
	    	</div>
	    </div>
	    <div class="saveAddress" @click="saveAddress" v-if='keybordFlag'>
	    	保存地址
	    </div>
	</div>
</template>
<script>
/*添加和编辑收货地址*/
import { Picker ,MessageBox,Switch} from 'mint-ui';
import { Group, XAddress,XHeader,ChinaAddressV3Data ,Value2nameFilter as value2name} from 'vux'
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
	name:"editAddress",
	// 数据
	data(){
		return{
			 title:'',
			 value: [],
			 addressData: ChinaAddressV3Data,
			 provice:'',//省
			 city:'',//市
			 area:'', //区
			 userName:"" ,//用户名
			 userTel:"" ,//用户联系方式
			 detailAddress:"", //用户详细地址
			 defaults:false, //是否为默认地址
			 userId:"",
			 defaultsAddress:"", //默认地址对应的参数
			 ADR_ID:"",  //地址ID
			 keybordFlag:true
		}
	},
	// 计算属性
	computed:{

	},
	// 创建（实例创建完成）
	created(){
		//获取userid
		this.userId=getCookie('loginkey');
		if(localStorage.getItem("addressMess")){
			let addrMess=JSON.parse(localStorage.getItem("addressMess"));//编辑传过来的地址信息
			this.defaultsAddress=addrMess.IS_DEFAULT;
			if(this.defaultsAddress){
				this.defaults=true;
			}else{
				this.defaults=false;
			}
			this.userName=addrMess.CONTACT;
			this.userTel=addrMess.PHONE;
			this.city=addrMess.CITY;
			this.area=addrMess.RANGE;
			this.detailAddress=addrMess.ADDRESS;
			this.ADR_ID=addrMess.ADR_ID;
			this.provice=addrMess.PROVINCE;
			setTimeout(()=>{
				let str='';
				if(this.provice==this.city){
					str=this.provice+" "+this.area;
				}else{
					str=this.provice+this.city+this.area;
				}
				document.querySelector('.vux-popup-picker-placeholder').innerHTML=str;
			})
		}
	},
	// el被创建，并挂载到实例上
	mounted(){
		// this.keyBords();

	},
	// 方法（实例中的方法）-----------
	methods:{
		//返回
	    returnLink(){
	      this.$router.go(-1);
	    },
	    //省市区的选择使用的是vux的组件
	    logHide(){
	    	let str=value2name(this.value, ChinaAddressV3Data);
	    	let arr=str.split(' ');
	    	let showStr='';
	        this.provice=arr[0];
	        showStr=arr[0];
	    	if(arr[1]==='市辖区'){
	    		this.city=arr[0];
	    	}else{
	    		this.city=arr[1];
	    		showStr=showStr+" "+arr[1];
	    	}
	    	this.area=arr[2];
	    	showStr=showStr+" "+arr[2];
	    	if(showStr!=''&&arr.length>1){
	    		document.querySelector('.vux-popup-picker-value').innerHTML=showStr;
	    	}else{
	    		if(localStorage.getItem("addressMess")){
	    			let addrMess=JSON.parse(localStorage.getItem("addressMess"));//编辑传过来的地址信息
	    			let str='';
	    			this.provice=addrMess.PROVINCE;
	    			this.city=addrMess.CITY;
	    			this.area=addrMess.RANGE;
	    			str+=this.provice+' ';
	    			if(addrMess.PROVINCE!=addrMess.CITY){
	    				str+=this.city;
	    			}
	    			str+=this.area;
	    			document.querySelector('.vux-popup-picker-placeholder').innerHTML=str;
	    		}else{
	    			document.querySelector('.vux-popup-picker-placeholder').innerHTML='';
	    		}
	    	}

	    },
	    //解决Android中键盘弹起是吧input框顶上去的问题
	    keyBords(){
	    	var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	    	let that=this;
	    	window.addEventListener('resize', function () {
			    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
			    if (clientHeight > nowClientHeight) {
			        //键盘弹出的事件处理
			        that.keybordFlag=false;
			    }
			    else {
			        //键盘收起的事件处理
			        that.keybordFlag=true;
			    }
			});
	    },
	    //保存收货地址
	    saveAddress(){
	    	let that=this;
	    	if(this.userName==""||this.userTel==""||this.detailAddress==""){
	    		MessageBox.alert('请将地址信息补充完整');
	    	}else if(!/^1[34578]\d{9}$/g.test(this.userTel)){
	    		MessageBox.alert('请输入合格的号码');
	    	}else{
	    		let url;
	    		if(this.defaults){
	    			this.defaultsAddress=1;
	    		}else{
	    			this.defaultsAddress=0;
	    		}
	    		if(this.area==''){
	    			this.area=this.city;
	    		}
	    		let obj={
	    			USER_ID:this.userId,
	    			IS_DEFAULT:this.defaultsAddress,
	    			CONTACT:this.userName,
	    			PHONE:this.userTel,
	    			PROVINCE:this.provice,
	    			CITY:this.city,
	    			RANGE:this.area,
	    			ADDRESS:this.detailAddress,
	    		}
	    		console.log(obj);
	    		//return;
	    		if(!localStorage.getItem('addressMess')){
                    url="UserAdrWeb/saveUserAdr";
	    		}else{
	    			url="UserAdrWeb/updateUserAdr";
	    			obj.ADR_ID=this.ADR_ID;
	    		}
	    		this.$fetchPost(url,obj).then(res=>{
                	if(res.STATUS_CODE==1){
                		if(!localStorage.getItem('addressMess')){
							this.$vux.alert.show({
					              title: '提示',
					              content: '收货地址添加成功',
					              onHide () {
					              	that.$router.go(-1);
					              }
					        })
                		}else{
							this.$vux.alert.show({
					              title: '提示',
					              content: '收货地址编辑成功',
					              onHide () {
					              	that.$router.go(-1);
					              }
					        })
                		}

                	}
                })
	    	}
	    }
	},
	// 子组件
	components:{
		Group, XAddress,XHeader
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.editAddress{
	width: 7.5rem;
	height: 100%;
	background: #eaeaea;
	position:relative;
	.commentHeader{
		background: #fff;
		color: #000;
		border-bottom: 1px solid #d9d9d9;
		font-size: 0.3rem;
	}
	.addressMess{
		background: #fff;
		.ItemList{
			.selectD{
				line-height: 0.6rem;
			}
			display: flex;
			height: 1rem;
			padding: 0 0.2rem;
			.borderBFu(#ccc);
			label{
				font-size: 0.25rem;
				width: 22%!important;
				line-height: 1rem;
				text-align: right;
				padding-right: 0.2rem;
				.spanCenter{
					padding: 0 0.11rem;
				}
			}
			input{
				border:0;
				outline: medium;
				font-size: 0.3rem;
				width: 70%;
				color: #020202;
			}

			em{
				font-size: 0.3rem;
				font-style: normal;
				line-height: 1.25rem;
				width: 72%;
				text-align: left;
			}
			img{
				width: 0.4rem;
				height: 0.6rem;
				margin-top: 0.2rem;
			}
		}
		.detailAddress input{
			width: 75%;
		}
		.defaults{
			.selectDefaults{
				width: 25%;
			}
			justify-content:space-between;
		}
	}
	.saveAddress{
		position:fixed;
		bottom: 0;
		width: 100%;
		display: block;
		height:0.8rem;
		line-height: 0.8rem;
		font-size: 0.3rem;
		text-align: center;
		background: #ec2121;
		color: #fff;
	}
	.setectAdress{
		position:fixed;
		bottom: 0;
		width: 100%;
		height: 0;
		background: #fff;
		z-index: 999;

	    p{
	    	height: 0rem;
	    	em{
	    		font-size: 0.3rem;
	    		font-style: normal;
	    		z-index: 11111;
	    		padding: 0.1rem;
	    	}
	    	em:nth-of-type(1){
	    		position: absolute;
	    		top: 0;
	    		left: 0.2rem;
	    	}
	    	em:nth-of-type(2){
	    		position: absolute;
	    		top: 0;
	    		right: 0.2rem;
	    	}
	    }
		.picker{

			.picker-item{
				text-align: center!important;
			}
			transition:all 0.3s;
		}

	}
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		z-index:998;
	}
	.qy{
		height: 3rem;
	}
}
</style>
